<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>1px实现方案</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .app {
            padding: 10px 15px;
        }

        .title {
            font-size: 16px;
            line-height: 48px;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .title:not(:first-child) {
            padding-top: 20px;
        }

        .text {
            font-size: 12px;
            color: #000;
            padding-top: 10px;
        }

        .box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 50px;
        }

        .fake_item,
        .bg_item,
        .bg_img_item {
            position: relative;
            line-height: 30px;
            width: 60px;
            text-align: center;
            border-radius: 10px;
        }

        .fake_item::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 200%;
            height: 200%;
            transform-origin: 0 0;
            /* 设置一个元素变形的原点。默认值是50% 50%不符合我们呈现的位置 */
            transform: scale(0.5, 0.5);
            border: 1px solid #000;
            border-radius: 10px;
        }

        .bg_item {
            background:
                linear-gradient(180deg, #000, #000 50%, transparent 50%) top left / 100% 1px no-repeat,
                linear-gradient(90deg, #000, #000 50%, transparent 50%) top right / 1px 100% no-repeat,
                linear-gradient(0, #000, #000 50%, transparent 50%) bottom right / 100% 1px no-repeat,
                linear-gradient(-90deg, #000, #000 50%, transparent 50%) bottom left / 1px 100% no-repeat;

            border-radius: 0;
        }

        .bg_img_item {
            /* box-shadow: inset 0px -1px 1px -1px #000; 底边框阴影*/
            box-shadow: inset 0px -1px 1px -1px #000,
                inset -1px 0px 1px -1px #000,
                inset 1px 0px 1px -1px #000,
                inset 0px 1px 1px -1px #000;
        }

        .svgbg {
            width: 100%;
            height: 1px;
            background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1px"><line x1="0" y1="0" x2="100%" y2="0" stroke="black"></line></svg>');
            background-size: 100% 1px;
        }

        .bgline {
            width: 100%;
            height: 1px;
            background: #000;
            transform: scaleY(0.5);
        }

        .afterline {
            width: 100%;
            position: relative;
        }

        .afterline::after {
            position: absolute;
            content: '';
            bottom: 0;
            width: 100%;
            border-bottom: 1px solid #000;
            transform: scaleY(0.5);
        }

        .thin-line {
            width: 100%;
            position: relative;
        }

        .thin-line::after {
            position: absolute;
            content:'';
            bottom: 0;
            width:100%;
            border-bottom:1px solid #000;
        }

        @media screen and (-webkit-min-device-pixel-ratio: 2){ 
            .thin-line::after {
                transform: scaleY(0.5);
            }
        }
    </style>

    <script>
        var viewport = document.querySelector("meta[name=viewport]");
        //下面是根据设备像素设置viewport  
        if (window.devicePixelRatio == 1) {
            viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
        }
        if (window.devicePixelRatio == 2) {
            viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
        }
        if (window.devicePixelRatio == 3) {
            viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
        }  
    </script>

</head>

<body>
    <div class="app">
        <div class="title">伪元素实现: CSS selector: ::before </div>
        <div class="box">
            <div class="fake_item">周一</div>
            <div class="fake_item">周二</div>
            <div class="fake_item">周三</div>
            <div class="fake_item">周四</div>
            <div class="fake_item">周五</div>
        </div>
        <div class="text">特点: 兼容性好，可以实现圆角，但会占据一个伪元素</div>
        <div class="text">兼容版本: 几乎全面兼容;不兼容版本有:ie7及以下版本和电脑Safari3.2及以下版本</div>

        <div class="title">渐变背景色实现: background: linear-gradient</div>
        <div class="box">
            <div class="bg_item">周一</div>
            <div class="bg_item">周二</div>
            <div class="bg_item">周三</div>
            <div class="bg_item">周四</div>
            <div class="bg_item">周五</div>
        </div>
        <div class="text">特点: 兼容性较一般，可在当前元素上直接实现0.5边框效果，不能实现圆角，会占据一个背景</div>
        <div class="text">兼容版本: PC兼容性一般，移动端兼容性较好; 不兼容版本有:ie9及以下版本 Chrome9及以下版本 Sarifi5及以下版本 IOS Sarifi5.1及以下版本 </div>

        <div class="title">通过阴影实现： CSS box-shadow</div>
        <div class="box">
            <div class="bg_img_item">周一</div>
            <div class="bg_img_item">周二</div>
            <div class="bg_img_item">周三</div>
            <div class="bg_img_item">周四</div>
            <div class="bg_img_item">周五</div>
        </div>
        <div class="text">特点: 兼容性较好，可在当前元素上直接实现0.5边框效果，能实现圆角，且不占据任何元素</div>
        <div class="text">兼容版本: 移动端兼容性很棒，PC兼容性较好; 不兼容版本有:ie8及以下版本 Firefox3及以下版本 Opera10.1及以下版本</div>

        <div class="title">通过SVG图片实现 1px 线条</div>
        <div class="box">
            <div class="svgbg"></div>
        </div>
        <div class="text">特点: 兼容性较好，可在当前元素上直接实现0.5边框效果，能实现圆角，且不占据任何元素</div>
        <div class="text">兼容版本: 移动端兼容性很棒，PC兼容性较好; 不兼容版本有:ie8及以下版本 Firefox3及以下版本 Opera10.1及以下版本</div>

        <div class="title">使用单独的Dom元素加transform: scale(0.5) 来实现 1px 线条</div>
        <div class="box">
            <div class="bgline"></div>
        </div>
        <div class="text">特点：兼容性好，但不可以实现圆角也会占据一个元素</div>
        <div class="text">兼容版本: 几乎全面兼容；不兼容浏览器有：ie7及以下版本和电脑Safari3.2及以下版本</div>

        <div class="title">伪元素实现: CSS selector: ::after</div>
        <div class="box">
            <div class="afterline thin-line"></div>
        </div>
        <div class="text">特点：兼容性好，但不可以实现圆角也会占据一个伪元素</div>
        <div class="text">兼容版本: 几乎全面兼容；不兼容浏览器有：ie7及以下版本和电脑Safari3.2及以下版本</div>

        <div class="title">media screen : -webkit-min-device-pixel-ratio 精确实践1px边框</div>
        <div class="box">
            <div class="afterline thin-line"></div>
        </div>
        <div class="text">特点：兼容性好，但不可以实现圆角也会占据一个伪元素</div>
        <div class="text">兼容版本: 几乎全面兼容；不兼容浏览器有：ie7及以下版本和电脑Safari3.2及以下版本</div>

    </div>
</body>

</html>
